<template>
  <div class="home-container">
    <!-- 首页头部 -->
    <div class="home-header">
      <!-- logo -->
      <div class="logo-wrap">
        <van-image
          class="logo"
          :src="require('../../assets/images/Ediandian.png')"
          fit="cover"
        />
      </div>
      <!-- 搜索区 -->
      <div class="search-wrap">
        <!-- 搜索框 -->
        <van-button
          class="search-input"
          size="large"
          type="default"
          text="#你想要了解的小知识"
        >
        </van-button>

        <div class="icon-wrap">
          <i class="iconfont icon-sousuo1"></i>
        </div>
        <!-- 搜索图标 -->
      </div>
    </div>

    <div class="main-content">
      <!--  轮播图 -->
      <div class="swiper-wrapper">
        <van-swipe :autoplay="3000" indicator-color="#F7931E">
          <van-swipe-item v-for="image in images" :key="image.id">
            <van-image
              class="swiper-image"
              lazy-load
              :src="image.imageUrl"
              fit="cover"
            />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- banner -->
      <div class="banner-wrap">
        <van-grid :border="false">
          <van-grid-item class="banner" text="小知识" @click="userTips">
            <template slot="icon">
              <div class="icon-wrap">
                <i class="iconfont icon-tixingtubiao"></i>
              </div>
            </template>
          </van-grid-item>
          <van-grid-item class="banner" text="食谱" to="/menuMoudle">
            <template slot="icon">
              <div class="icon-wrap">
                <i class="iconfont icon-shipu"></i>
              </div>
            </template>
          </van-grid-item>

          <van-grid-item
            class="banner"
            text="我的日程"
            :to="{ name: 'myplan' }"
          >
            <template slot="icon">
              <div class="icon-wrap">
                <i class="iconfont icon-richeng"></i>
              </div>
            </template>
          </van-grid-item>

          <van-grid-item class="banner" text="适宜人群" to="/personCate">
            <template slot="icon">
              <div class="icon-wrap">
                <i class="iconfont icon-shiyirenqun"></i>
              </div>
            </template>
          </van-grid-item>
        </van-grid>
      </div>

      <!-- 时钟区 -->
      <div class="clock-play-wrapper">
        <div class="clocks">
          <clock bg="#EEFCDF" border="0px"></clock>
        </div>
        <div class="user-play">
          <!-- 标语提示 -->
          <div class="remind">
            <i class="iconfont icon-icon-test"></i>
            <span style="font-size: 12px; line-height: 30px"
              >知足常乐者，能忍者自安</span
            >
          </div>
          <!-- 计划提示 -->
          <div class="play-tip" v-if="play != null">
            <span>{{ play.startTime }} - {{ play.finishTime }}</span>
            <span>{{ play.thing }}</span>
          </div>

          <div class="play-tip" v-if="play == null">
            <span>尚未安排计划</span>
          </div>
        </div>
      </div>

      <!-- 分类 -->
      <div class="health-knowledge-area">
        <div class="item-area" @click="userTips">
          <div class="item-card">
            <van-image
              :src="require('../../assets/images/tradition-nutrition.jpg')"
              fit="cover"
            />
            <div class="overlay">
              <span>中国传统营养学</span>
            </div>
          </div>

          <div class="item-card">
            <van-image
              :src="require('../../assets/images/tenHealthyFood.jpg')"
              fit="cover"
            />
            <div class="overlay">
              <span>十大极品养生食物</span>
            </div>
          </div>
        </div>

        <div class="item-area">
          <div class="item-card" @click="userTips">
            <van-image
              :src="require('../../assets/images/worldTenHealthyFood.jpg')"
              fit="cover"
            />
            <div class="overlay">
              <span>世界公认十大养生食物</span>
            </div>
          </div>

          <div class="item-card" @click="userTips">
            <van-image
              :src="require('../../assets/images/bestHealthyFood.jpg')"
              fit="cover"
            />
            <div class="overlay">
              <span>最大的养生是什么</span>
            </div>
          </div>
        </div>

        <div class="item-area" @click="userTips">
          <div class="item-card">
            <van-image
              :src="require('../../assets/images/spring.jpg')"
              fit="cover"
            />
            <div class="overlay">
              <span>四季养生之道春夏秋冬</span>
            </div>
          </div>

          <div class="item-card" @click="userTips">
            <van-image
              :src="require('../../assets/images/prevent.jpg')"
              fit="cover"
            />
            <div class="overlay">
              <span>预防年轻人的高发疾病</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Clock from "vue-clock2";
import Vue from "vue";
import { Lazyload } from "vant";
import { getIndexSwipeImage } from "@/api/swipe.js";
import { getPlayByTime } from "@/api/play";
import { mapState } from "vuex";

Vue.use(Lazyload);

export default {
  components: { Clock },
  name: "Home",

  data() {
    return {
      timer: null, //延时器
      images: [],
      play: {
        id: null,
        startTime: new Date().getHours() + ":" + new Date().getMinutes(),
        finishTime: new Date().getHours() + ":" + new Date().getMinutes(),
        thing: "",
        player: {
          id: "",
        },
      },
    };
  },

  mounted() {
    getIndexSwipeImage().then((res) => {
      this.images = res.data;
    });
  },

  computed: {
    ...mapState("user", ["user"]),
  },

  activated() {
    /**
     * 获取当前时间段计划
     */
    this.getPlayByTime();
  },

  methods: {
    /**
     * 用户提示
     */
    userTips() {
      this.$dialog.confirm({
        title: "提示",
        message: "该功能正在完善，敬请期待",
      });
    },

    /**
     * 获取当前时间段计划
     */
    getPlayByTime() {
      let date = new Date();
      let hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let params = {
        curTime: hour + ":" + minutes,
        userId: this.user.id,
      };

      getPlayByTime(params).then((res) => {
        if (res.data == "") {
          this.play = null;
          return;
        }
        this.play = res.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.home-header {
  width: 345px;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-image: linear-gradient(to bottom right, #abeea1, #75d1be);
  padding: 0 15px;
  .logo-wrap {
    width: 50px;
    height: 40px;
    padding-top: 5px;
    .logo {
      width: 50px;
      height: 42px;
    }
  }

  .search-wrap {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 250px;
    height: 30px;
    margin: auto;
    .search-input {
      width: 100%;
      height: 100%;
      color: #e6e6e6;
    }

    .icon-wrap {
      box-sizing: border-box;
      width: 30px;
      height: 100%;
      padding-top: 3px;
      padding-left: 3px;
      position: absolute;
      right: 0;
      background-color: #eefcdf;
    }
  }
}

.main-content {
  width: 345px;
  height: auto;
  margin: 0 auto;
  .swiper-wrapper {
    width: 100%;
    height: 125px;
    padding-top: 5px;
    .van-swipe {
      width: 100%;
      height: 100%;
    }

    .swiper-image {
      width: 100%;
      height: 100%;
    }
  }
}

.banner-wrap {
  width: 100%;
  height: 85px;
  margin-top: 0px;
  .banner /deep/ .van-grid-item__content {
    background-color: #f2f2f2 !important;

    .icon-wrap {
      position: relative;
      width: 41px;
      height: 41px;
      border-radius: 50%;
      background-color: #99d3a2;
      overflow: hidden;
      align-items: center;

      .iconfont {
        position: absolute;
        display: block;
        width: 22px;
        height: 21px;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        color: #fff;
      }
    }
  }
}

.clock-play-wrapper {
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .clocks {
    width: 100px;
    height: 100px;
    margin: auto;
    .clock {
      width: 100px;
      height: 100px;
    }
  }

  .user-play {
    width: 230px;
    height: 100px;
    border-radius: 10px;
    overflow: hidden;
    .remind {
      width: 100%;
      height: 30px;
      background-color: #eefcdf;
      .icon-icon-test {
        color: rgb(255, 128, 64);
      }
    }

    .play-tip {
      background-image: url("../../assets/images/programe-back.jpg");
      background-size: cover;
      background-repeat: no-repeat;
      span {
        font-size: 15px;
        line-height: 70px;
        padding: 0 15px;
      }
    }
  }
}

.health-knowledge-area {
  .item-area {
    width: 100%;
    height: 74px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;

    .item-card {
      position: relative;
      width: 170px;
      height: 100%;
      border-radius: 10px;
      overflow: hidden;

      .van-image {
        width: 170px;
        height: 74px;
      }
      .overlay {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        text-align: center;

        span {
          font-size: 12px;
          color: #fff;
          line-height: 74px;
        }
      }
    }
  }
}
</style>